import { UserInfo } from '@/api'
import MenuBg from '@/assets/bg-2.png'
import MenuIcon1 from '@/assets/icon-1.png'
import MenuIcon2 from '@/assets/icon-2.png'
import MenuIcon3 from '@/assets/icon-3.png'
import MenuIcon4 from '@/assets/icon-4.png'
import MenuIcon5 from '@/assets/icon-5.png'
import MenuIcon6 from '@/assets/icon-6.png'

import { Helmet, history, useQuery } from 'umi'

const MenuIcons = [{
  icon: MenuIcon1,
  path: '/forms/form1',
  name: '菜品成本',
  desc: '菜品成本 毛利润率',
  order: 1,
}, {
  icon: MenuIcon2,
  path: '/forms/form2',
  name: '盈亏平衡',
  desc: '固定成本 盈利亏损',
  order: 2,
}, {
  icon: MenuIcon3,
  path: '/forms/form5',
  name: '菜品定价',
  desc: '堂食外卖 保本定价',
  order: 3,
}, {
  icon: MenuIcon6,
  path: '/forms/form6',
  name: '团购定价',
  desc: '套餐团购 参考定价',
  order: 4,
}, {
  icon: MenuIcon5,
  path: '/forms/form3',
  name: '投资回报',
  desc: '开店成本 回本周期',
  order: 5,
}, {
  icon: MenuIcon4,
  path: '/forms/form4',
  name: '营收指标',
  desc: '营收指标 一键计算',
  order: 6,
}].sort((a, b) => a.order - b.order)

export default function HomePage() {
  // #获取用户信息
  const { data: user } = useQuery({
    queryKey: ['get:userinfo'],
    queryFn: () => UserInfo(),
  })

  return (
    <>
      <Helmet>
        <title>餐饮计算器</title>
      </Helmet>

      <section className="relative px-4 pt-4 min-h-screen bg-[#f2f1f6]">
        <div className="grid grid-cols-2 gap-2">
          {
            MenuIcons.map((i, index) => (
              <div
                key={index}
                onClick={() => history.push(i.path)}
                className=" relative w-[340px] h-[322px] bg-cover flex items-center flex-col justify-center"
                style={{
                  backgroundImage: `url(${MenuBg})`,
                }}
              >
                <b className="w-[64px] h-[64px] bg-cover absolute left-4 top-4" style={{ backgroundImage: `url(${i.icon})` }}></b>

                <h3 className="text-base font-medium text-black">{ i.name}</h3>
                <p className="text-sm mt-1 text-gray-600">{ i.desc}</p>
              </div>
            ))
          }
        </div>

        <div className=" text-center text-gray-400 text-sm mt-4">
          <p>{user?.phone}</p>
          <p>
            剩余使用次数
            {user?.left_num}
          </p>
        </div>

        <div className=" text-center text-sm text-gray-500 mt-6">
          <p>官方网站</p>
          <a href="https://www.orangebench.cn" className="text-primary font-medium">www.orangebench.cn</a>
          <p className="mt-2">客服电话</p>
          <a className="text-primary font-medium" href="tel:400 696 1313">400 696 1313</a>
          <p>客服微信</p>
          <p className="text-primary font-medium">GKSERVICE001</p>
        </div>
      </section>
    </>
  )
}
